<template>
  <div id="tabCardBox">
    <div class="tabCard" @click="cardClick(turnPath)">
      <div class="cardTop">
        <div class="cardImg">
          <slot name="cardIcon"></slot>
        </div>
        <span class="cardTitle">{{title}}</span>
      </div>
      <div class="cardText">{{text}}</div>
    </div>
  </div>
</template>

<script>
	export default {
		name: "TabCard",
    props: {
			title: {
				type: String,
        default: ''
      },
      text: {
				type: String,
				default: ''
      },
      turnPath: {
				type: String,
        default: ''
      }

    },
    methods: {
			cardClick(path) {
				console.log(path);
				this.$emit('turnToNewPage', path);
			}
    }
	}
</script>

<style scoped>

  #tabCardBox {
    width: 240px;
    height: 145px;
    padding: 5px;
  }

  .tabCard {
    width: 100%;
    height: 100%;
    border: 1px #aaa solid;
    cursor: pointer;
    border-radius: 3px;
  }

  .tabCard:hover {
    border: 2px #3f7ef0 solid;
  }

  .cardTop {
    display: flex;
    line-height: 60px;
  }

  .cardImg {
    width: 60px;
    height: 60px;
    margin-left: 12px;
    display: flex;
  }

  .cardTitle {
    width: 80px;
    text-align: center;
    margin-left: 38px;
  }

  .cardText {
    text-align: center;
    padding: 10px;
  }


</style>